<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="签约状态">
        <el-select v-model="userVo.status" clearable placeholder="请选择" @change="getList(-1)">
          <el-option :value="0" :label="'待签约'" />
          <el-option :value="1" :label="'签约中'" />
          <el-option :value="2" :label="'签约生效中'" />
          <el-option :value="3" :label="'待续约'" />
        </el-select>
      </el-form-item>

      <el-form-item label="签约机构">
        <el-select v-model="userVo.organizationId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="organization in organizationList"
            :key="organization.id"
            :label="organization.name"
            :value="organization.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生团队">
        <el-select v-model="userVo.teamId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="team in teamList"
            :key="team.id"
            :label="team.name"
            :value="team.id">
          </el-option>
        </el-select>
      </el-form-item>

      <router-link to="/user/add">
        <el-button type="primary" icon="el-icon-search">新建居民档案</el-button>
      </router-link>
      <el-button type="default" @click="">导出</el-button>

      <el-form-item label="服务包">
        <el-select v-model="userVo.packageId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="packages in packageList"
            :key="packages.id"
            :label="packages.name"
            :value="packages.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="居民标签">
        <el-select v-model="userVo.labelId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="label in labelList"
            :key="label.id"
            :label="label.name"
            :value="label.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="userVo.name" placeholder="请输入关键字"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <i class="el-icon-nested"></i>
      <i class="el-icon-menu"></i>
    </el-form>

    <!--数据显示列表-->
    <el-table ref="multipleTable" :stripe="true" :data="dataList" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id"  label="编号" ></el-table-column>
      <el-table-column label="姓名" >
        <template slot-scope="scope">
          <el-avatar :size="30" v-if="scope.row.image" :src="'http://rj0158yod.hd-bkt.clouddn.com/' + scope.row.image">{{ scope.row.name }}</el-avatar>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="身份证号" ></el-table-column>
      <el-table-column prop="id" label="手机号码" ></el-table-column>
      <el-table-column prop="signStatusId" label="签约状态">
        <template slot-scope="scope">
          <span v-if="scope.row.signStatusId == 0">未签约</span>
          <span v-if="scope.row.signStatusId == 1">签约中</span>
        </template>
      </el-table-column>

      <el-table-column prop="labelId" label="用户标签">
        <template slot-scope="scope">
          <span v-if="scope.row.labelId == 1">java架构师</span>
          <span v-if="scope.row.labelId == 2">vue</span>
          <span v-if="scope.row.labelId == 3">前端</span>
        </template>
      </el-table-column>

      <el-table-column prop="code" label="居民状态">
        <template slot-scope="scope">
          <el-switch
            @change="handleChangeStatus(scope.row.id)"
            style="display: block"
            v-model="scope.row.status"
            active-color="#409EFF"
            inactive-color="#8c939d"
            active-text="启用"
            inactive-text="禁用"
            :active-value="'1'"
            :inactive-value="'0'">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作"width="350" >
        <template slot-scope="scope">


          <router-link :to="'/user/detail/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">查看详情</el-link>
          </router-link>
          <router-link :to="'/user/edit/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">编辑</el-link>
          </router-link>
          <router-link :to="'/user/edit/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">发消息</el-link>
          </router-link>
          <router-link :to="'/user/edit/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">添加服务</el-link>
          </router-link>
          <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-link>

        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>

import user from '../../api/user'
import organization from "../../api/organization";
import team from "../../api/admin/team";
import packagePlus from "../../api/packagePlus";
import label from "../../api/admin/label";

  export default {
    data(){
      return {
        listLoading: true,                // 加载数据
        userVo: {},                       // 查询条件对象
        currentPage: 1,                   // 当前页
        pageSize: 3,                      // 每页记录数
        dataList:[],                      // 分页数据
        total: 0,                         // 总记录数
        dialogVideoFormVisible: false,    // 维护页面不可见
        user: {},                        //维护表单数据模型
        status: [],             //所有的培训师头衔
        organizationList: [],             //机构数组
        teamList: [],                     //团队数组
        packageList: [],                  //服务包数组
        labelList: [],                    //标签数组
      }
    },

    methods: {
      // 页面初始化查询数据
      getList(value){

        if(value == -1){
          // 点击搜索之后应该从第一页开始查询
          this.currentPage = 1;
        }

        // 此处应该调用api里面的相关方法 getList
        user.getList(this.currentPage, this.pageSize, this.userVo).then(res => {
          // 以前要获取响应的数据  res.data  拿到的此时result对象
          // 此处 res就是result对象
          // 将查询出来的分页数据赋值给数据模型
          this.dataList = res.data.data;
          this.total = res.data.total;
          console.log(this.dataList);
        });
      },
      //查询所有机构
      getOrganizationList(){
        organization.getAll().then(res => {
          this.organizationList = res.data;
        });
      },
      //查询所有团队名
      getTeamList(){
        team.queryAll().then(res => {
          this.teamList = res.data;
        });
      },
      //查询所有服务包名称
      getPackageList(){
        packagePlus.queryAll().then(res => {
          this.packageList = res.data;
        });
      },
      //查询所有标签
      getLabelList(){
        label.getAll().then(res => {
          this.labelList = res.data;
        });
      },

      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },
      // 清空查询数据
      resetData(){
        // 清空搜索的内容
        this.userVo = {};
        // 重新查询数据
        this.getList();
      },
      //更改课程的状态
      handleChangeStatus(userId){
        user.setStatus(userId).then(res => {
          // 弹出成功的提示信息
          this.$message.success(res.message);
          // 重新加载数据
          this.getList(-1);
        });
      },

      // 删除文章
      handleRemove(id){
        this.$confirm("是否确定删除数据？", "提示", {type: 'warning'})
          .then(() => {
            // 表示点击了确定
            user.remove(id).then(res => {
              // 此处我要不要考虑失败的情况
              // 弹出成功的提示信息
              this.$message.success(res.message);
              // 重新加载数据
              this.getList(-1);
            });
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.user.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res.data;

        this.user.image = res.data;
      },
      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
    created(){
      this.getList();
      this.getOrganizationList();
      this.getTeamList();
      this.getPackageList();
      this.getLabelList();
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
